<template>
  <Row class="nav">
    <Menu >
        <Submenu name="1">
            <template slot="title">
                <Icon type="ios-paper" />
                内容管理
            </template>
            <MenuItem name="1-1" :to="{name:'topic'}">文章管理</MenuItem>
            <MenuItem name="1-2">评论管理</MenuItem>
            <MenuItem name="1-3">举报管理</MenuItem>
        </Submenu>
        <Submenu name="2">
            <template slot="title">
                <Icon type="ios-people" />
                用户管理
            </template>
            <MenuItem name="2-1"  :to="route_path+'/user:'+userid">新增用户</MenuItem>
            <MenuItem name="2-2">活跃用户</MenuItem>
        </Submenu>
        <Submenu name="3">
            <template slot="title">
                <Icon type="ios-stats" />
                统计分析
            </template>
            <MenuGroup title="使用">
                <MenuItem name="3-1">新增和启动</MenuItem>
                <MenuItem name="3-2">活跃分析</MenuItem>
                <MenuItem name="3-3">时段分析</MenuItem>
            </MenuGroup>
            <MenuGroup title="留存">
                <MenuItem name="3-4">用户留存</MenuItem>
                <MenuItem name="3-5">流失用户</MenuItem>
            </MenuGroup>
        </Submenu>
    </Menu>
</Row>
</template>

<script>
import Vue from 'vue'
import { Menu, Row,Submenu ,MenuGroup,MenuItem,Icon} from 'iview';

export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      userid:123333,
      route_path:''
    }
  },
  components:{ Menu, Row,Submenu ,MenuGroup,MenuItem,Icon},
  watch: {
    '$route'(to,form){
      console.log('to:'+to.path+';form:'+form.path)
    }
  },
  methods:{

  },
  mounted() {
    console.log(this.$route);
    this.route_path=this.$route.path;
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav{

}
</style>
